To make developing React apps easier, we can add some libraries to make our lives easier.
In this article, we’ll look at some popular libraries for React apps.
react-focus-lock
The react-focus-lock package lets us keep the focus of an element.
To install it, we can run:
npm i react-focus-lock
Then we can use it by writing:
import React from "react";
import FocusLock from "react-focus-lock";
export default function App() {
const onClose = e => console.log(e);
return (
<FocusLock>
<button onClick={onClose}>button</button>
</FocusLock>
);
}
We have the FocusLock
component to keep the focus on the button.
The options for hos to focus and what component the FocusLock
component can be rendered as can be changed.
React-Toastify
The React-Toastify component lets us add toasts to our React app easily.
To install the package, we run:
npm i react-toastify
Then we can use it by writing:
import React from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
export default function App() {
const notify = () => toast("toast!");
return (
<div>
<button onClick={notify}>Notify!</button>
<ToastContainer />
</div>
);
}
We import the CSS and the JavaScript module.
Then we can call the toast
function to display the toast.
The position, content, update, duration, etc., can all be changed.
React-Ace
The React-Ace is a text editor component that we can add to our React app.
We can install it by running:
npm i react-ace
Then we can use it by writing:
import React from "react";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";
export default function App() {
function onChange(newValue) {
console.log("change", newValue);
}
return (
<div>
<AceEditor
mode="java"
theme="github"
onChange={onChange}
name="id"
editorProps={{ $blockScrolling: true }}
/>
</div>
);
}
We import the CSS and then we can use the AceEditor
component to add the editor.
editorProps
has the options for the editor.
We can add listeners for focus, blur, scroll, validate, and more.
The number of lines to display can also be changed.
mode
is the language for parsing and code highlighting.
theme
has the theme to use to style the editor.
It also comes with the SplitEditor
component which can create multiple linked instances of the Ace editor.
Each instance shares a theme and other properties but they have their own value.
For example, we can write:
import React from "react";
import { split as SplitEditor } from "react-ace";
import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";
export default function App() {
return (
<div>
<SplitEditor
mode="java"
theme="github"
splits={2}
orientation="below"
value={["hi", "hello"]}
name="id"
editorProps={{ $blockScrolling: true }}
/>
</div>
);
}
to add the split editor.
react-day-picker
react-day-picker is a flexible day picker we can use in our React app.
It’s highly customizable, localizable, and it doesn’t require any external dependencies.
To install it, we run:
npm i react-day-picker
Then we can add the day picker with the DayPicker
component:
import React from "react";
import DayPicker from "react-day-picker";
import "react-day-picker/lib/style.css";
export default function App() {
return (
<div>
<DayPicker />
</div>
);
}
We can make it a controlled component by passing in the onDayClick
and selectedDays
props:
import React from "react";
import DayPicker from "react-day-picker";
import "react-day-picker/lib/style.css";
export default function App() {
const [selectedDay, setSelectedDay] = React.useState();
const handleDayClick = day => {
setSelectedDay(day);
};
return (
<div>
<DayPicker onDayClick={handleDayClick} selectedDays={selectedDay} />
</div>
);
}
onDayClick
sets the day selected to the selectedDay
state.
selectedDays
has the value of the selected day from the selectedDay
state.
We can style it and it supports localization.
Conclusion
react-focus-lock lets us set the focus on elements on the app.
React-Toastify lets us display toasts easily.
React-Ace is a text editor.
react-day-picker is a day picker that’s styleable and supports localization.